@keyframes BgShow {
    0% {
        transform: scale(0);
        opacity: 0;
        display: none;
    }
    80% {
        transform: scale(1.06);
        opacity: .8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        display: block;
    }
}

@keyframes BgHide {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0);
        opacity: 0;
    }
}

.login-layout {
    position: relative;
    background-image: url('../../assets/bg/bg_02.jpg');
    background-position: bottom;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-filter {
    backdrop-filter:blur(5px);
}
  
.login-title {
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 20px;
}

.loginBox {
    position: relative;
    padding: 30px 70px;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 0px 20px 0px #bfbfbf66;
    overflow: hidden;
    text-align: center;
}

.login-input,
.login-input-1 {
    display: flex;
    margin: 15px auto;
}

.login-input {
    width: 220px;
}

.login-input-1 {
    width: 288px;
}


:deep(.el-input__wrapper) {
    border-radius: 12px;
    box-shadow: 0 0 0 1px #a6b5df inset;
    background-color: transparent;
}

:deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #0052d9 inset !important;
}

:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px #0052d9 inset !important;
}

:deep(.select-trigger) {
    width: 100%;
}

.loginBtn,
.registerBtn {
    height: 40px;
    margin: 20px auto;
}

.loginBtn {
    width: 215px;
}

.registerBtn {
    width: 285px;
}

.login-bg-1 {
    width: 470px;
    margin-right: 70px;
}

.login-bg-2 {
    background: #ffffff52;
    padding: 20px 50px 15px;
    border-radius: 10px;
    box-shadow: 0 0px 20px 0px rgb(191 191 191 / 40%);
}

@media only screen and (min-width: 951px), (min-height: 601px) {
    .login-bg-1 {
        animation: BgShow .75s ease-in-out 0s forwards;
    }
}

@media only screen and (max-width: 950px), (max-height: 600px) {
    .lottie-icon-1 {
        display: none;
    }

    .login-bg-1 {
        animation: BgHide 1s ease-in-out 0s forwards;
        display: none;
    }

    .login-bg-2 {
        background: none;
        padding: 0;
        box-shadow: none;
        border-radius: 0px;
    }
}
